$preColor: #{'#'};
$liColor: '#F6F6F6', '#FFFFFF', '#FF5B25', '#333333', '#999999', '#9aa7bd', '#E88637', '#F34035', '#ED8417', '#222222', '#666666';
$direction: 'left', 'right', 'top', 'bottom';

/* 布局 */
.flex-row {
	display: flex;
	flex-direction: row;
}

.yellow_btn {
	height: 90rpx;
	background: #fed100;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	font-weight: 400;
	color: #333333;
	border-radius: 45rpx;
}

.white_btn {
	height: 90rpx;
	background: #fff;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	font-weight: 400;
	color: #333333;
  border: 1rpx solid #979797;
	border-radius: 45rpx;
}

.flex-row-center {
	@extend .flex-row;
	align-items: center;
}
.flex-align-center{
  display: flex;
  align-items: center;
}
.area-title {
	font-size: 30rpx;
	color: #333333;
	font-weight: bold;
	margin-bottom: 25rpx;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-between {
	justify-content: space-between;
}

.flex-center {
	justify-content: center;
}

.flex-start {
	justify-content: flex-start;
}

.flex-end {
	justify-content: flex-end;
}

.flex-around {
	justify-content: space-around;
}

.align-center {
	align-items: center;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-baseline {
	align-items: baseline;
}

.mar-left-108 {
	margin-left: 1upx * 108;
}

input {
	color: #333333;
}

.fn-bold {
	font-weight: 500;
}

.fn-weight-600 {
	font-weight: 600;
}

.border-bottom-E5 {
	border-bottom: 1px solid #e5e5e5 !important;
}

.scroll {
	width: 100%;
	overflow: hidden !important;
	white-space: nowrap;
}

.split {
	width: 1px;
	height: 24upx;
	background-color: #e5e5e5;
}

.more-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.more-text2 {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}

.min-h-800 {
	min-height: 1200upx;
}

.shadow {
	// box-shadow: 0px 2px 15px 0px rgba(232, 234, 241, 0.38);
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
}

.line-center {
	display: inline-block;
	text-align: center;
}
.text-center {
	text-align: center;
}
.container {
	background-color: #f6f6f6;
	padding-bottom: 60upx;
}

.btn-shadow {
	box-shadow: 0px 1px 7px 0px #ffceb4;
}

.bg-liner {
	background: linear-gradient(270deg, #3c64e5, #1c47d0, #002dba);
}

.fixed {
	position: fixed;
	bottom: 20upx;
}

.fixed-bottom {
	// border-top: 1px solid #EEEEEE;
	position: fixed;
	bottom: 0upx;
}

.line-through {
	text-decoration-line: line-through;
}

.cur-tab {
	position: absolute;
	width: 40upx;
	height: 4upx;
	background: #333333;
	border-radius: 1px;

	top: 50upx;
}

.share-button::after {
	border: none;
	background-color: none;
}

.share-button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: none;
}

@each $c in $liColor {
	$len: str-length($c);
	$name: str-slice($c, 2, $len);

	.bg-cl-#{$name} {
		background-color: #{$c};
	}

	.fn-cl-#{$name} {
		color: #{$c} !important;
	}

	.border-#{$name} {
		border: 1px solid #{$c};
	}

	.border-top-#{$name} {
		border-top: 1px solid #{$c};
	}

	.border-bottom-#{$name} {
		border-bottom: 1px solid #{$c};
	}
}

@for $i from 1 through 120 {
	.fn-sz-#{$i} {
		font-size: 1upx * $i !important;
	}

	.radius-#{$i} {
		border-radius: 1upx * $i;
	}

	.radius-up-#{$i} {
		border-radius: 1upx * $i 1upx * $i 0 0;
	}

	.mar-lr-#{$i} {
		margin-left: 1upx * $i;
		margin-right: 1upx * $i;
	}

	.mar-tb-#{$i} {
		margin-top: 1upx * $i;
		margin-bottom: 1upx * $i;
	}

	.pd-lr-#{$i} {
		padding-left: 1upx * $i;
		padding-right: 1upx * $i;
	}

	.pd-#{$i} {
		padding-left: 1upx * $i;
		padding-right: 1upx * $i;
		padding-top: 1upx * $i;
		padding-bottom: 1upx * $i;
	}

	.icon-#{$i} {
		width: 1upx * $i;
		height: 1upx * $i;
	}

	.pd-tb-#{$i} {
		padding-top: 1upx * $i;
		padding-bottom: 1upx * $i;
	}

	@each $d in $direction {
		.mar-#{$d}-#{$i} {
			margin-#{$d}: 1upx * $i;
		}

		.pd-#{$d}-#{$i} {
			padding-#{$d}: 1upx * $i;
		}
	}
}

@for $i from 1 through 375 {
	.w-#{$i} {
		width: 1upx * $i;
	}

	.w-per-#{$i} {
		width: $i#{'%'};
	}

	.h-per-#{$i} {
		height: $i#{'%'};
	}

	.h-#{$i} {
		height: 1upx * $i;
	}

	.min-h-#{$i} {
		min-height: 1upx * $i;
	}

	.line-btn-#{$i} {
		display: inline-block;
		text-align: center;
		height: 1upx * $i;
		line-height: 1upx * $i;
		border-radius: #{$i}upx;
		color: #ffffff;
		font-size: 30upx;
	}

	.line-h-#{$i} {
		line-height: 1upx * $i;
	}
}

.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}

.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #ffffff;
		font-size: 12px;
	}
}
